<template>
	<view>
		<uNavbar title="拼手机" bgColor=" #E0DDDA" leftIconColor="#333333" :titleStyle="titleStyle"></uNavbar>
		<view class="tab flex_ld">
			<!-- <view class="tab_box flex_c" v-for="(item,index) in navList" :key="item.id">
				<text :class="item.id == navId?'active1':''" @click="changeNav(item.id)">{{item.name}}</text>
			</view> -->
		</view>
		<view class="together flex_ld">
			<view class="together_box " v-for="item in phonelist" :key="item.id">
				<image class="bgphone" :src="item.three_d" mode="aspectFill"></image>
				<!-- <image class="logos" :src="item.logo" mode="aspectFill"></image> -->
				<text class="names">{{item.name}}</text>
				<text class="f26 c9">市场价：{{item.market_price}}</text>
				<text class="choose" @click="changePin(item)">选这个</text>
			</view>
		</view>

		<u-popup :show="pinShow " mode="bottom" @close="pinShow = false " bgColor="transparent">
			<view class="pin_phone">
				<image class="bg_phone" :src="recordPhone.cover" mode="aspectFill"></image>
				<view class="pin_center flex_ZC">
					<text class="phone_name">{{recordPhone.name}}</text>
					<view class="pin_center_txt flex_ld">
						<text class="f28 c3">总配件量：{{recordPhone.accessory_number}}</text>
						<text class="f26 c3">配件总价：{{recordPhone.accessory_total_price}}</text>
					</view>
					<view class="pin_center_txt flex_ld">
						<text class="f32 c6">当前基金累计</text>
						<text class="money1">￥{{recordPhone.accumulated_price}}</text>
					</view>
					<view class="progress_box">
						<u-line-progress :percentage="recordPhone.accumulated_ratio" height="15"
							inactiveColor="transparent"></u-line-progress>
					</view>
					<text class="f28 c6">当前参与人数：{{recordPhone.in_number}}</text>
					<view class="change_btn flex_c" @click="changePhone">
						<text>选择这个</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		installmentindex,
		installmentinfo,
		choosePhone,
		phoneAgain
	} from "../../api/myphone.js"
	export default {
		data() {
			return {
				sumNumber: 45, //比例
				navList: [],
				phonelist: [],
				navId: 1,
				pinShow: false,//弹窗
				recordPhone:{},//暂存记录
				titleStyle: {
					color: '#333333'
				},
				again:0
			}
		},
		onLoad(options) {
			this.again=options.again
			this.getnavlist()
		},
		methods: {
			// 分类
			getnavlist() {
				installmentindex().then(res => {
					if (res.code == 1) {
						this.navList = res.data
						this.navId = res.data[0].id
						this.initDetail()
						console.log(this.navId)
					}
				})
			},
			// 详情
			initDetail() {
				let data = {
					id: this.navId
				}
				installmentinfo(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.phonelist = res.data.phone
					}
				})
			},
			// 切换导航
			changeNav(id) {
				this.navId = id
				this.ids = ''
				this.initDetail()
			},
			// 选择手机弹窗
			changePin(item){
				console.log(item);
				this.recordPhone = item
				this.pinShow = true
			},

			// 确认手机
			changePhone() {
				this.pinShow = false
				let data = {
					phone_id: this.recordPhone.id
				}
				console.log(this.again,"000")
				if(this.again==1){
					uni.removeStorageSync("phoneBuyTips")
					phoneAgain(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.reLaunch({
									url: '/pagesMy/nationalPhonePooling/phoneIndex'
								})
							}, 1000);
						}
					})
					
				}else{
					choosePhone(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.reLaunch({
									url: '/pagesMy/nationalPhonePooling/phoneIndex'
								})
							}, 1000);
						}
					})
				}
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.tab {
		width: 690rpx;
		margin: 20rpx auto;
	}

	.tab_box {
		width: 260rpx;
		font-size: 32rpx;
		padding: 20rpx 0;
		color: #999999;
	}

	.active1 {
		color: #333333 !important;
	}

	.together {
		width: 690rpx;
		margin: 0 auto;
	}

	.together_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 336rpx;
		height: 436rpx;
		border-radius: 20rpx;
		background: #F2F2F2;
	}

	.bgphone {
		width: 136rpx;
		height: 178rpx;
	}
	.logos{
		position: absolute;
		top: 30rpx;
		right: 100rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.names {
		font-size: 30rpx;
		color: #333333;
		font-weight: 700;
		margin: 24rpx 0 10rpx;
	}

	.choose {
		width: 220rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: #A68A64;
		border-radius: 34rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin-top: 22rpx;
	}

	.navigation {
		position: relative;
		width: 620rpx;
		height: 64rpx;
		background: #A68A64;
		margin: 30rpx auto;
		overflow-x: auto;
	}

	.navigation_box {
		width: 50%;
		height: 64rpx;
		font-size: 32rpx;
		color: #ffffff;
		z-index: 9;
	}

	.pin_phone {
		width: 750rpx;
		background: #ffffff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
	}

	.bg_phone {
		width: 100%;
		height: 450rpx;
		border-radius: 56rpx 56rpx 0 0;
	}

	.pin_center {
		width: 750rpx;
		height: 486rpx;
	}

	.pin_center_txt {
		width: 610rpx;
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.phone_name {
		font-size: 48rpx;
		font-family: 'iconfont';
		margin: 20rpx 0 26rpx;
	}

	.money1 {
		font-size: 40rpx;
		color: #A68A64;
		font-family: 'iconfont2';
	}

	.progress_box {
		width: 604rpx;
		position: relative;
		padding: 8rpx;
		border-radius: 40rpx;
		border: 1rpx solid #AB8E6820;
		background: #A68A6420;
		margin: 24rpx auto;
	}

	.change_btn {
		width: 408rpx;
		height: 106rpx;
		font-size: 48rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 60rpx;
		font-family: 'iconfont2';
		margin-top: 32rpx;
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(90deg, #D7BA93 0%, #AB8E68 100%);
	}
</style>